﻿@using Smartstore.Web.Models.Cart;

@model OffCanvasCartModel

@{
    var labelStyle = Display.GetThemeVariable<string>("shopbar-label", "warning");
}

<zone name="offcanvas_cart_before"></zone>

<div class="offcanvas-cart-header offcanvas-tabs">
    <ul class="nav nav-tabs nav-tabs-line row no-gutters" role="tablist" aria-label="@T("Aria.Label.OffCanvasCartTab")">
        <li sm-if="Model.ShoppingCartEnabled" class="nav-item col" role="none">
            <a id="cart-tab" 
               class="nav-link focus-inset" 
               data-toggle="tab" 
               href="#occ-cart" 
               data-url="@Url.Action("OffCanvasShoppingCart", "ShoppingCart")"
               role="tab" 
               aria-controls="occ-cart" 
               aria-selected="true" 
               tabindex="0">
                <span class="title">@T("PageTitle.ShoppingCart")</span>
                <span class="badge badge-pill badge-counter label-cart-amount badge-@labelStyle" 
                      data-bind-to="CartItemsCount" 
                      attr-style='(Model.CartItemsCount == 0, "display:none")'
                      aria-live="polite"
                      aria-atomic="true">
                        @Model.CartItemsCount
                </span>
            </a>
        </li>
        <li sm-if="Model.WishlistEnabled" class="nav-item col" role="none">
            <a id="wishlist-tab" 
               class="nav-link focus-inset" 
               data-toggle="tab" 
               href="#occ-wishlist" 
               data-url="@Url.Action("OffCanvasWishlist", "ShoppingCart")"
               role="tab"
               aria-controls="occ-wishlist" 
               aria-selected="false" 
               tabindex="-1">
                <span class="title">@T("Wishlist")</span>
                <span class="badge badge-pill badge-counter label-cart-amount badge-@labelStyle" 
                      data-bind-to="WishlistItemsCount" 
                      attr-style='(Model.WishlistItemsCount == 0, "display:none")'
                      aria-live="polite"
                      aria-atomic="true">
                        @Model.WishlistItemsCount
                </span>
            </a>
        </li>
        <li sm-if="Model.CompareProductsEnabled" class="nav-item col" role="none">
            <a id="compare-tab" 
               class="nav-link focus-inset" 
               data-toggle="tab" 
               href="#occ-compare" 
               data-url="@Url.Action("OffCanvasCompare", "Catalog")"
               role="tab" 
               aria-controls="occ-compare" 
               aria-selected="false" 
               tabindex="-1">
                <span class="title">@T("Common.Shopbar.Compare")</span>
                <span class="badge badge-pill badge-counter label-cart-amount badge-@labelStyle" 
                      data-bind-to="CompareItemsCount" 
                      attr-style='(Model.CompareItemsCount == 0, "display:none")'
                      aria-live="polite"
                      aria-atomic="true">
                        @Model.CompareItemsCount
                </span>
            </a>
        </li>
    </ul>
</div>

<div class="offcanvas-cart-content">
    <form id="offcanvas-cart-form">
        <div class="tab-content">
            <div sm-if="Model.ShoppingCartEnabled" class="tab-pane fade" id="occ-cart" role="tabpanel" aria-labelledby="cart-tab"></div>
            <div sm-if="Model.WishlistEnabled" class="tab-pane fade" id="occ-wishlist" role="tabpanel" aria-labelledby="wishlist-tab"></div>
            <div sm-if="Model.CompareProductsEnabled" class="tab-pane fade" id="occ-compare" role="tabpanel" aria-labelledby="compare-tab"></div>
        </div>
        @* INFO: Avoid submit button failure in WCAG checkers. *@
        <button type="submit" class="sr-only">@T("Common.Submit")</button>
    </form>
</div>
